import QtQuick

Item{
    anchors.fill: parent

    PullListViewV2{
        id: listView
        anchors.fill: parent
        model: listModel
        delegate: Item {
            id: name
            height: 40
            width: listView.width

            Rectangle{
                anchors.fill: parent
                anchors.margins: 4
                color: "red"
                radius: 4
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 6
                    anchors.left: parent.left
                    text: "行:" + index
                }
            }
        }

        Component{
            id: cmpHeader
            Rectangle{
                color: "yellow"
                width: listView.width
                height: 24
                Row{
                    anchors.centerIn: parent
                    spacing: 10
                    Image {
                        id: icon
                        width: 16
                        height: width
                        source: "qrc:/resource/refresh.png"
                        rotation: Math.abs(listView.contentY / 200) * 360
                        RotationAnimation{
                            id:rotationAnimation
                            target: icon
                            from: 0
                            to:360
                            direction: RotationAnimation.Clockwise
                            loops: Animation.Infinite
                            running: listView.headerHold
                            duration: 800
                        }
                    }
                    Text{
                        text: listView.headerHold ? "正在刷新" : "松开刷新"
                    }
                }

            }
        }
        header: headerVisible ? cmpHeader : null
        onHeaderHoldChanged:{
            if(headerHold)
                timerRefresh.start()
        }

        Component{
            id: cmpFooter
            Rectangle{
                color: "yellow"
                width: listView.width
                height: 16
                Text{
                    anchors.centerIn: parent
                    text: listView.footerHold ? "正在加载..." : "加载更多"
                }
            }
        }
        footer: footerVisible ? cmpFooter : null
        onFooterHoldChanged: {
            if(footerHold)
                timerLoadMore.start()
        }
    }


    //刷新
    Timer{
        id: timerRefresh
        interval: 1000
        onTriggered: {
            console.log("刷新完成")
            listModel.refresh()
            listView.headerVisible = false
        }
    }

    //加载
    Timer{
        id: timerLoadMore
        interval: 1000
        onTriggered: {
            console.log("加载完成")
            listModel.loadMore()
            listView.footerVisible = false
        }
    }

    ListModel{
        id: listModel

        function refresh(){
            listModel.clear()
            for(var i = 0; i < 10; i ++){
                listModel.append({name:listModel.count + 1})
            }
        }
        function loadMore(){
            for(var i = 0; i < 5; i ++){
                listModel.append({name:listModel.count + 1})
            }
        }

        function canLoadMore(){
            return count > 30 ? false : true;
        }

        Component.onCompleted: refresh()
    }

//    //debug
//    Column{
//        anchors.centerIn: parent
//        width: parent.width
//        Text{
//            text: "atYBeginning:" + listView.atYBeginning
//        }
//        Text{
//            text: "flicking:" + listView.flicking
//        }

//        Text{
//            text: "moving:" + listView.moving
//        }
//        Text{
//            text: "dragging:" + listView.dragging
//        }
//    }
}
